<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>借还管理-云校通_教师版</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/css/xcgl_kcgl.css" />
<style>
.weui-header-left .aicon {
	font-family: iconfont !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
}
.main{
        background: #fff;
      }
      .weui_panel_bd{
        border-bottom: 1px solid #ccc;
      }
      .weui_panel_bd .icon
        position: absolute; right: 4%;
      }
      .weui_panel_bd .big_size{
        float: left;
        margin-bottom: 8px;
        margin-right: 12%;
        font-size: 15px;
      }
      .btnBox{
        position: fixed; right: 8%; bottom: 100px;
        width: 80px; height: 80px;
      }
      .btnBox img{
        width: 80px; height: 80px;
      }
</style>
</head>
<body ontouchstart>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div class="weui-header bg-blue">
		<div class="weui-header-left">
			<a onclick="back()" class="aicon icon-109 f-white">返回</a>
		</div>
		<h1 class="weui-header-title">借还管理</h1>
	</div>
	<div class="header_tab">
		<ul>
			<li class="active left"><p>已借出</p></li>
			<li class="right"><p>已归还</p></li>
		</ul>
	</div>

    <div class="main" style="padding-bottom: 60px;">
	   <div id="item1">
	   </div>
	   <div class="dropload-down f10" style="display:block;" id="div1">
			<div class="loadData dropload-hasData" id="div3">点击加载更多数据...</div>
	   </div>
	   <div class="dropload-load f10" id="div2" style="display:none;"><span class="weui-loading"></span>正在加载中...</div>
   </div>
	
	<div class="main display" style="padding-bottom: 60px;">
	   <div id="item2">
	   </div>
	   <div class="dropload-down f10" style="display:block;" id="div4">
			<div class="loadData dropload-hasData" id="div6">点击加载更多数据...</div>
	   </div>
	   <div class="dropload-load f10" id="div5" style="display:none;"><span class="weui-loading"></span>正在加载中...</div>
	</div>
	
	 <div class="btnBox">
       <a href="lendAndReturnInex/add"><img src="<%=basePath%>/images/addBtnnew.png"></a>
    </div>
	
	<script>
	    var item1 = {page:1,rows:5,cycleUse:1,state:0};
	    var item2 = {page:1,rows:5,cycleUse:1,state:1};
	    var itemId1 = '#item1';
	    var itemId2 = '#item2';
	    var first = true;
	    var flag = "left" //选项卡标识 
		window.onload = function() {
			initData();
			loadItem(item1,itemId1);
		}
		
		function initData(){
			var uli = document.getElementsByClassName('header_tab')[0].getElementsByTagName('li');
			var realMain = document.getElementsByClassName('main');
			// -----
			var writeBtns = document.getElementsByClassName('write');
			var handleBtns = document.getElementsByClassName('handle');
			var statusMain = document.getElementsByClassName('s_main');
			var statustextarea = document.getElementsByTagName('textarea');
			// -----
			var showBtns = document.getElementsByClassName('db_title');
			var showMain = document.getElementsByClassName('db_main');
			var btnChange = document.getElementsByClassName('icon');
			// -----
			
			showDetails(uli, null, null, realMain, null);
			showDetails(showBtns, showMain, btnChange, null, null);
			showDetails(writeBtns, statusMain, null, statustextarea, handleBtns);
			showDetails(handleBtns, statustextarea, null, statusMain, writeBtns);
		}
		
		function showDetails(btn, main, bChange, textarea, handle) {
			for (var i = 0; i < btn.length; i++) {
				btn[i].index = i;
				btn[i].onmouseover = function() {
					if (main === null) {//btn textarea
						btn[this.index].onclick = function() {
							aClick(btn, btn[this.index], textarea[this.index],textarea);
						}
					} else if (bChange !== null) {
						btn[this.index].onclick = function() {
							bClick(main[this.index], bChange[this.index]);
						}
					} else if (textarea !== null) {
						if (btn[this.index].className !== 'write') {
							var cbtn = btn[this.index]
									.getElementsByTagName('li');
							var a = this.index
							cbtn[1].onclick = function() {
								btn[a].style.display = 'none';
								main[a].style.display = 'none';
								textarea[a].style.display = 'block';
								handle[a].style.display = 'block';
							}
							cbtn[0].onclick = function() {
								btn[a].style.display = 'none';
								main[a].style.display = 'none';
								textarea[a].style.display = 'block';
								handle[a].style.display = 'block';
								textarea[a].innerText = main[a].value
							}
						} else {
							wClick(btn[this.index], main[this.index],
									textarea[this.index], handle[this.index]);
						}
					}
				}
			}
		}
		function aClick(obtn, btn, main, omain) {
			if (btn.className === 'left') {
				obtn[0].className = 'active left'
				obtn[1].className = 'right'
				omain[1].className = 'display main'
				omain[0].className = 'main'
				flag = 'left';
			} else {
				obtn[0].className = 'left'
				obtn[1].className = 'active right'
				omain[1].className = 'main'
				omain[0].className = 'display main'
				flag = 'right';
				if(first){
					loadItem(item2,itemId2);
					first = false;
				}
			}
		}
		function bClick(main, bChange) {
			if (main.style.display === 'block') {
				main.style.display = 'none'
				bChange.className = 'icon icon-6 f-blue'
			} else if (main.style.display === null) {
				main.style.display = 'none'
				bChange.className = 'icon icon-6 f-blue'
			} else {
				main.style.display = 'block'
				bChange.className = 'icon icon-8 f-blue'
			}
		}
		function wClick(wBtn, main, textarea, handle) {
			main.style.display = 'none'
			wBtn.style.display = 'none'
			textarea.style.display = 'block'
			handle.style.display = 'block'
			textarea.value = main.innerText.replace(/[\r\n]/g, "").replace(
					/[ ]/g, "")//去掉回车空格后赋值
		}
		
		$(".dropload-down").on("click", ".dropload-hasData", function() {
			if(flag ==='left'){
				item1.page++;
				loadItem(item1,itemId1);
			}
			if(flag ==='right'){
				item2.page++;
				loadItem(item2,itemId2);
			}
		});
	</script>
	<!-- ajax加载数据 -->
	<script>
	function loadItem(param, id) {
		$.ajax({
			url : basePath + '/ls/school/property/outputRecord/query',
			type : 'post',
			dataType : 'json',
			data : param,
			success : function(data) {
				if(flag === 'left'){
					$("#div1").css('display','none');					
	                 $("#div2").css('display','block');
					writerDataToDom(data.data,id);
					if(param.page * param.rows >= data.data.total){
	                   	$("#div3").html("没有更多数据了...");
	                   	$("#div1").unbind();
					}
					setTimeout(function() {
						    $("#div1").css('display','block');					
		                    $("#div2").css('display','none');		
	        		},800);
				}
				if(flag === 'right'){
					$("#div4").css('display','none');					
	                 $("#div5").css('display','block');
					writerDataToDom(data.data,id);
	                 
					if(param.page * param.rows >= data.data.total){
	                   	$("#div6").html("没有更多数据了...");
	                   	$("#div4").unbind();
					}
					setTimeout(function() {
						    $("#div4").css('display','block');					
		                    $("#div5").css('display','none');		
	        		},800);
				}
				
			}
		});
	}
	
	function writerDataToDom(data,id){
		if(data.rows.length > 0) {
    		var html = "";
    		if(flag ==='left'){
	    		for(var i in data.rows) {
	    			var item = data.rows[i];
	    			html += '<div class="weui_panel_bd clear ldetail">\
	    			              <div style="display:none">'+ item.id +'</div>\
		                          <div class="weui_media_box weui_media_text">\
	                              <h4 class="weui_media_title">借用人: '+ item.usedName +'</h4>\
	                              <span class="icon icon-108"></span>\
	                              <p class="weui_media_desc big_size">物品名称: '+ item.goodsName +'</p>\
	                              <p class="weui_media_desc big_size">数量:' + item.number +'</p>\
	                              <p class="weui_media_desc clear">借用日期: '+ new Date(item.createTime).format('yyyy年 MM月 dd日 hh:mm:ss') + '</p></div>\
	                         </div>';
	    		}
    		}
    		if(flag ==='right'){
	    		for(var i in data.rows) {
	    			var item = data.rows[i];
	    			html += '<div class="weui_panel_bd clear rdetail">\
	    				<div style="display:none">'+ item.id +'</div>\
                        <div class="weui_media_box weui_media_text">\
                        <h4 class="weui_media_title">借用人: '+ item.usedName +'</h4>\
                        <span class="icon icon-108"></span>\
                        <p class="weui_media_desc big_size">物品名称: '+ item.goodsName +'</p>\
                        <p class="weui_media_desc big_size">数量:' + item.number +'</p>\
                        <p class="weui_media_desc clear">归还日期: '+ new Date(item.createTime).format('yyyy年 MM月 dd日 hh:mm:ss') + '</p></div>\
                   </div>';
	    		}
    		}
    		
    		$(id).append(html);
    		initData();
	   }
   }
	function placeSite(str){
		if(str == null){
			return "";
		}else{
			return str;
		}
	}
	function describe(str){
		if(str == null)
			return "";
		else
			return str;
	}
	$('#item1').on('click',".ldetail",function(){
		var item = ($(this).children("div").get(0).innerHTML).trim();
		if(item != ''){
			window.location.href="lendAndReturnInex/ldetail?outputId=" + item;
		}
		
	});
    $('#item2').on('click',".rdetail",function(){
    	var item = ($(this).children("div").get(0).innerHTML).trim();
		if(item != ''){
			window.location.href="lendAndReturnInex/rdetail?outputId=" + item;
		}
    });
	Date.prototype.format = function(fmt) {
		var o = {
			"M+" : this.getMonth() + 1,
			"d+" : this.getDate(),
			"h+" : this.getHours(),
			"m+" : this.getMinutes(),
			"s+" : this.getSeconds(),
			"q+" : Math.floor((this.getMonth() + 3) / 3),
			"S" : this.getMilliseconds()
		};
		if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
					.substr(4 - RegExp.$1.length));
		}
		for ( var k in o) {
			if (new RegExp("(" + k + ")").test(fmt)) {
				fmt = fmt.replace(RegExp.$1,
						(RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k])
								.substr(("" + o[k]).length)));
			}
		}
		return fmt;
	}
	</script>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>